<template>
   <a-table :columns="columns" :data-source="page.list" >
     <template #opr="{ record }">
        <a-button @click="updateinfo(record)">修改个人信息</a-button>
        <a-divider type="vertical" />
        <router-link to='/answer/answer'>
          <a-button  >开始答题</a-button>
        </router-link>
     </template>
   </a-table>

 <!-- 修改信息窗口 -->
<a-modal v-model:visible="visible2" title="信息修改" @ok="execChange">
    <a-form
      :model="changeObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="姓名">
        <a-input v-model:value="changeObj.user_name"  />
      </a-form-item>
      <a-form-item label="年龄">
        <a-input v-model:value="changeObj.age"  />
      </a-form-item>
      <a-form-item label="邮箱">
        <a-input v-model:value="changeObj.email"  />
      </a-form-item>
      <a-form-item label="手机号码">
        <a-input v-model:value="changeObj.phone"  />
      </a-form-item>
      <a-form-item label="标注偏好">
      <a-radio-group v-model:value="changeObj.favor">
        <a-radio value="选择题">选择题</a-radio>
        <a-radio value="填空题">填空题</a-radio>
      </a-radio-group>
    </a-form-item>
      
    </a-form>
</a-modal> 
</template>
<script setup>


import {  reactive, ref } from 'vue';
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";

//个人信息表
const currPage = ref("info");
const columns = [
  {
    dataIndex:'user_id',
    title:'用户ID',
  },
  {
    dataIndex:'user_name',
    title:'用户名',
  },
   {
    dataIndex:'age',
    title:'年龄',
  },
  {
    dataIndex:'user_pwd',
    title:'用户密码',
  },
  {
    dataIndex:'email',
    title:'邮箱',
  },
  {
    dataIndex:'phone',
    title:'手机号码',
  },
  {
    dataIndex:'favor',
    title:'标注偏好',
  },
  {
        key: "opr",
        title: "操作", 
        slots: {
          customRender: "opr", 
        },
  },
];

//分页处理-start
const query = reactive({
});//定义查询参数

const page = ref({});//接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1,//当前页
  pageSize: 10,//每页记录数
  total: 0,//总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"],//每页记录下拉框的选型
  showSizeChanger: true,//是否展示每页记录数下拉框
  showQuickJumper: true,//是否展示快速跳转
  showTotal: (total, range) => {//展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get('/respondent/respond', query).then(res => {
    page.value = res.data;//将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current=page.value.current
    pagination.pageSize=page.value.pageSize
    pagination.total=page.value.total
    
  });
};
getPage(1);//页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
    
	pagination.current=pagi.current
  pagination.pageSize=pagi.pageSize
  pagination.total=pagi.total

	getPage(pagination.current)
};
//分页处理-end

// //修改信息部分
const visible2 = ref(false);
const changeObj = reactive({
      user_id: "",
      user_name:"",
      age:0,
      email:"",
      phone:"",
      favor:"",
    });

   //打开修改信息窗口
const updateinfo = (info) => {
      changeObj.user_id = info.user_id;
      changeObj.user_name = info.user_name;
      changeObj.age = info.age;
      changeObj.email = info.email;
      changeObj.phone = info.phone;
      changeObj.favor = info.favor;
      //打开窗口
      visible2.value = true;
    };
  
//   //修改信息
const execChange = () => {
      //执行修改
      post("/respondent/updateinfo", changeObj).then((res) => {
        changeObj.user_name = "";
        changeObj.age = 0;
        changeObj.email = "";
        changeObj.phone = "";
        changeObj.favor = "";
        visible2.value = false;
        tip.success("修改信息成功！");
        getPage(page.value.current);
      });
  };
</script>

<style>

</style>

